<template>
  <div class="home_container">
    <div class="top">
      <h1>学生成绩管理系统</h1>
    </div>
    <el-card class="box-card">
      <!-- 添加按钮 -->
      <el-row :gutter="24" class="row">
        <el-col :span="3">
          <el-button type="primary" @click="addgrades">添加</el-button>
        </el-col>
      </el-row>
        <el-table
        class="m_t"
    :data="alltableData"
    border
    >
    <el-table-column
      prop="name"
      label="姓名"
      width="200px"
     >
    </el-table-column>
    <el-table-column
      prop="chinese"
      label="语文"
      width="180px"
     >
    </el-table-column>
    <el-table-column
      prop="english"
       width="180px"
      label="英语">
    </el-table-column>
      <el-table-column
      prop="math"
      label="数学"
       width="180px"
      >
    </el-table-column>
    <el-table-column
      prop="chemistry"
       width="180px"
      label="化学">
    </el-table-column>
    <el-table-column
      prop="biology"
       width="180px"
      label="生物">
    </el-table-column>
    <el-table-column
      prop="physics"
      label="历史"
       width="180px">
    </el-table-column>
      <el-table-column
      label="操作">
      <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="updategrades(scope.row)"></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="removegrades(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    <!-- 修改对话框 -->
    <el-dialog
  title="更新成绩"
  :visible.sync="updatedialogVisible"
  width="50%"
  :before-close="updateandleClose"
  >
  <!-- 表单 -->
  <el-form ref="updateforms"  :rules="updaterules" :model="infodata" label-width="80px">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="infodata.name"></el-input>
  </el-form-item>
    <el-form-item label="英语" prop="english">
    <el-input type="age" v-model.number="infodata.english" autocomplete="off"></el-input>
  </el-form-item>
    <el-form-item label="语文" prop="chinese">
    <el-input type="age" v-model.number="infodata.chinese" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="数学" prop="math">
    <el-input type="age" v-model.number="infodata.math" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="生物" prop="biology">
    <el-input type="age" v-model.number="infodata.biology" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="历史" prop="physics">
  <el-input type="age" v-model.number="infodata.physics" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="化学" prop="chemistry">
  <el-input type="age" v-model.number="infodata.chemistry" autocomplete="off"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="updateremove">取 消</el-button>
    <el-button type="primary" @click="updatesubmit">确 定</el-button>
  </span>
</el-dialog>
<!-- 增加成绩 -->
<el-dialog
  title="增加信息"
  :visible.sync="adddialogVisible"
  width="50%"
  :before-close="handleClose">
  <!-- 增加的表单 -->
  <el-form :model="addruleForm" :rules="addrules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="name">
    <el-input  v-model="addruleForm.name"></el-input>
  </el-form-item>
    <el-form-item label="英语成绩" prop="english">
    <el-input type="age" v-model.number="addruleForm.english" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="化学成绩" prop="chemistry">
    <el-input type="age" v-model.number="addruleForm.chemistry" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="语文成绩" prop="chinese">
    <el-input type="age" v-model.number="addruleForm.chinese" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="数学成绩" prop="math">
    <el-input type="age" v-model.number="addruleForm.math" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="历史成绩" prop="physics">
    <el-input type="age" v-model.number="addruleForm.physics" autocomplete="off"></el-input>
  </el-form-item>
    <el-form-item label="生物" prop="biology">
    <el-input type="age" v-model.number="addruleForm.biology" autocomplete="off"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addremove">重 置</el-button>
    <el-button type="primary" @click="addgradesresult">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alltableData: [],
      // 这是更新
      infodata: {
         biology: '',
        chemistry: '',
        chinese: '',
        english: '',
        id: 0,
        math: '',
        name: '',
        physics: ''
      },
      updaterules: {
        name: [
            { required: true, message: '姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '名字在 3 到 5 个字符', trigger: 'blur' }
        ],
        biology: [
           { required: true, message: '请输入', trigger: 'blur' },
          //  { min: 1, max: 3, message: '最大值150', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ],
        chemistry: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ],
        chinese: [
         { required: true, message: '请输入', trigger: 'blur' },
          { type: 'number', message: '成绩必须是数字值且不能超过150', max: 150 }
        ],
        english: [
          { required: true, message: '请输入', trigger: 'blur' },
           { type: 'number', message: '成绩必须是数字值且不能超过150', max: 150 }
        ],
        math: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ],
        physics: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ]
      },
      updatedialogVisible: false,
      adddialogVisible: false,
      // 增加信息
      addruleForm: {
        biology: '',
        chemistry: '',
        chinese: '',
        english: '',
        id: 0,
        math: '',
        name: '',
        physics: ''
      },
      addrules: {
        name: [
            { required: true, message: '姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '名字长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        biology: [
           { required: true, message: '请输入', trigger: 'blur' },
          //  { min: 1, max: 3, message: '最大值150', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ],
        chemistry: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 150 }
        ],
        chinese: [
         { required: true, message: '请输入', trigger: 'blur' },
          { type: 'number', message: '成绩必须是数字值且不能超过150', max: 150 }
        ],
        english: [
          { required: true, message: '请输入', trigger: 'blur' },
           { type: 'number', message: '成绩必须是数字值且不能超过150', max: 150 }
        ],
        math: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ],
        physics: [
           { required: true, message: '请输入', trigger: 'blur' },
            { type: 'number', message: '成绩必须是数字值且不能超过150', max: 100 }
        ]
      }
    }
  },
  created() {
    this.getdatalist()
  },
  methods: {
    // 获取全部列表
  async getdatalist() {
    const Result = await this.$http.post('allGrades')
    console.log(Result)
    if (Result.status !== 200) {
      return this.$message.error('获取列表失败')
    }
    this.alltableData = Result.data.data
  },
  // 删除学生成绩
  async removegrades(id) {
    // 先进行确认是否要要删除
    const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => err)
        if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      // 确认删除 发送请求
     const Result = await this.$http.post(`deleteGrade?id=${id}`)
    //  console.log(Result)
    if (Result.status !== 200) {
      return this.$message.error('删除失败')
    }
    this.$message.success('删除成功')
    this.getdatalist()
  },
  // 更新成绩
  updategrades(info) {
    this.updatedialogVisible = true
    // this.infodata = info
    // console.log(this.infodata)
    // console.log(info)
    this.infodata = {
        biology: info.biology,
        chemistry: info.chemistry,
        chinese: info.chinese,
        english: info.english,
        id: info.id,
        math: info.math,
        name: info.name,
        physics: info.physics
    }
  },
  // 确认更新
  async updatesubmit() {
    // 进行表单预验证
    this.$refs.updateforms.validate(async validate => {
      if (!validate) {
        return this.$message.error('请填写完整的信息')
      }
      // 发送请求
     const Result = await this.$http.post('updateGrade', this.infodata)
    //  console.log(Result)
    if (Result.status !== 200) {
      return this.$message.error('修改失败')
    }
    //  this.updategrades(Result.config.data)
      this.getdatalist()
       this.updatedialogVisible = false
       this.$message.success('修改成功')
    })
  },
  // 取消更新
  updateremove() {
    this.$refs.updateforms.resetFields()
    this.getdatalist()
    this.updatedialogVisible = false
  },
  // 关闭更新按钮
  updateandleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done()
            this.$refs.updateforms.resetFields()
           this.getdatalist()
          })
          .catch(_ => {})
  },
  // 增加成绩
  addgrades() {
    this.adddialogVisible = true
  },
  // 确认添加
  async addgradesresult() {
    // 确定前进行表单的预验证
    this.$refs.addruleForm.validate(async validate => {
      if (!validate) {
        return this.$message.error('请输入完整的信息')
      }
      // 验证通过
      const Result = await this.$http.post('addGrade', this.addruleForm)
      // console.log(Result)
      if (Result.status !== 200) {
        return this.$message.error('添加失败')
      }
      this.$message.success('添加成功')
      this.getdatalist()
      this.adddialogVisible = false
       this.$refs.addruleForm.resetFields()
    })
  },
  // 取消添加
  addremove() {
    this.$refs.addruleForm.resetFields()
    // this.adddialogVisible = false
  },
  // 关闭对话框触动的
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
            this.$refs.addruleForm.resetFields()
          })
          .catch(_ => {})
      }
  }
}
</script>

<style lang="less" scoped>
.home_container {
  height: 100%;
  .top {
    height: 80px;
    line-height: 80px;
    background-color: skyblue;
    text-align: center;
  }
}
.m_t {
  margin-top: 10px;
}
.row {
  display: flex;
  justify-content: flex-end;
}
</style>